<template>
	<div class="mainCon">
		<div class="containercontent">
			<div class="inlineblock tree">
		<div class="oprate">
			<!--物资类型-->
			<!-- :disabled="materialTypeInfo.id== undefined || materialTypeInfo.id== ''" -->
			<el-button type="primary" size="mini" style="float:right;margin-right:5px;" @click="deleteExperiment('materType')" :disabled="!groupData.code">删除</el-button>
			<el-button type="primary" size="mini" style="float:right;margin-right:5px;margin-left:0;" @click="editMaterType('edit')" :disabled="!groupData.code">修改</el-button>
			<el-button type="primary" size="mini" style="float:right;margin-right:5px;" @click="addExperiment" :disabled="!groupData.code">新增</el-button>
		</div>
				<el-tree :data="treedata" :props="defaultProps" :expand-on-click-node="false"
		@node-click="handleNodeClick" node-key="code" ref = "firstTree"></el-tree>

			</div>
			<div class="inlineblock treeright">
				<div class="penalrow selectw100" style="padding-left: 0;">
					<div class="inlineblock verticalmiddle infoitem">
						<div class="inlineblock verticalmiddle" style="margin-left: 5px;">
							<el-input style="" v-model="keyName" size="mini" placeholder="实验室名称" @keyup.enter.native="cmdfind"></el-input>
						</div>
						<div class="inlineblock  infoitem">
							<div class="inlineblock searchIcon" style="margin-left:15px;">
								<el-button size="mini" @click="cmdfind">搜索</el-button>
							</div>
							<div class="inlineblock verticalmiddle searchIcon">
								<el-button size="mini" @click="empty">清空</el-button>
							</div>
						</div>
					</div>
					<div class="basicRightDistanceA" style="position:absolute;">

					<el-button type="primary" size="mini" @click="addexperiment">添加</el-button>

					</div>
				</div>
				<div class="separaterow tableCon" style="height: calc(100% - 40px);">
					<el-table
						:data="experimentData"
						style="width: 100%"
						class="tableCon"
						size="mini"
						ref="standardTable"
						>
						<el-table-column label="编号" fixed min-width="50px">
							<template slot-scope="scope">
								{{scope.$index+1}}
							</template>
						</el-table-column>
						<el-table-column property="name" label="名称"  fixed min-width="60px">
						</el-table-column>
						<el-table-column property="type" label="类型" min-width="60px" :formatter="formatter">

						</el-table-column>
						<el-table-column property="principal" label="负责人" min-width="60px">
						</el-table-column>
						<el-table-column property="ename" label="标识" min-width="60px">
						</el-table-column>
						<el-table-column property="dataSourceMark" label="数据库标识" min-width="60px">
						</el-table-column>
						<el-table-column property="status" label="状态" min-width="60px" :formatter="formatterstatus">
						</el-table-column>
						<el-table-column property="operation" label="操作" min-width="60px">
							<template slot-scope="scope">
							<el-button  type="text" size="mini" @click.native="handleEdit(scope.$index, scope.row)">编辑</el-button>

							</template>
						</el-table-column>

					</el-table>
					<!--<div class="block  floatright">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="experimentQuery.page"
							:page-sizes="[5, 10, 20]"
							:page-size="experimentQuery.pageCount"
							layout="total, sizes, prev, pager, next, jumper"
							:total="rowNumber">
						</el-pagination>
					</div>-->

				</div>

			</div>
			<div v-if="experimentShow">
				<addexperiment></addexperiment>
			</div>
			<div v-if="groupShow">
				<addGroup></addGroup>
			</div>
		</div>
	</div>
</template>

<script>
	import addexperiment from './children/addexperiment.vue';
  	import addGroup from './children/addGroup.vue';
	export default {
		data() {
			return {
				keyName:'',
				experimentData:[],
				treedata: [],
			    defaultProps: {
					children: 'sub',
					label: 'ename'
			    },
			    experimentQuery: {
	              group:''
	            },
	            groupData:{},
	            rowNumber:0,
				experimentShow:false,
				deleteConfirmShow:false,
				addLaboratory:false,
				editLaboratory:false,
				ruleForm:{
       				code:'',
	       			name:'',
	       			group:'',
	       			type:'',
	       			principal:'', //负责人
	       			phone:'',
	       			domainName:'',
	       			address:'',
	       			driverClassName:'',
	       			dbHost:'',
	       			dbName:'',
	       			dbPort:'',
	       			dbUser:'',
	       			dbPassword:'',
	       			status:'',
	       			mark:''
       			},
       			first: false,
            groupShow:false,
            addGroupText:"新增",
			};
		},
		mounted(){
			this.getData();
			this.cmdfind(this.experimentQuery);

		},
		methods: {
			formatter(row, column) {
        var arr = row.type.split(",")
        var str = "";
        for(var i in arr){
          if(arr[i] == 1){
            str = str + "原水 "
          }else if(arr[i] == 2){
            str = str + "自来水 "
          }else if(arr[i] == 3){
           str = str + "污水 "
          }
        }
         return str;

		    },
		    formatterstatus(row, column){
		    	if(row.status == 0){
					var newStatus = '停用'
				}else if(row.status ==1){
					var newStatus = '启用'
				}
		        return newStatus;
		    },
			empty() {
				this.keyName = '';
				this.cmdfind();
			},
			getData(){
				this.$http({
					 // apiUrl: 'systemmanage/newLabDepartmentTree.htm?level=2',
           apiUrl:"/systemmanage/getGroupList.htm",
				     method: "post",
				}).then(res=>{
					if(res.code === 0){

						let setting={
								id:"code",
								pid:"parent",
								root:"",
								data:res.data
							};

						this.treedata = this.$listtotree(setting);
						this.$nextTick(() => {
							if(this.treedata.length > 0){
								this.$refs.firstTree.store.nodesMap[this.treedata[0].code].expanded = true;

							}
						})
					}

				})
			},
      addExperiment(){
         this.groupShow = true;
         this.addGroupText = "新增"
      },
      editMaterType(){
        this.groupShow = true;
        this.addGroupText = "编辑"
      },
      deleteExperiment(){
        this.$confirm('是否删除', '提示', {
        	confirmButtonText: '确定',
        	cancelButtonText: '取消',
        	type: 'warning'
        }).then(() => {
          var that = this;
          var param = {
          	code: this.groupData.code,
          }
          this.$http({
          	apiUrl:'/systemmanage/delGroup.htm',
          	type: 'post',
          	params: param,
          }).then(res =>{
          	if(res.code === 0){
          		this.$message({
          			type: 'success',
          			message: '删除成功!'
          		});
               this.groupData = {};
          		this.getData();

          	}
          });
        }).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
      },
			handleNodeClick(data) {
				this.groupData = data;
				//datacenterkey
				this.experimentQuery.group = data.datacenterkey;
				this.cmdfind(this.experimentQuery);
				if(this.groupData.code ==undefined){
						this.first = false;
				}else{
					this.first = true;
				}

		    },
			cmdfind(parp){
				var sendData={
					name:this.keyName,
					code:this.groupData.code,
				};
				this.$http({
					//  apiUrl: 'systemmanage/getLaboratoryByGroup.htm',
					apiUrl: 'systemmanage/newGetLaboratoryByGroup.htm',
				     method: "post",
				     params:sendData,
      				 isJson:false,
				}).then(res=>{
					if(res.code === 0){
						this.experimentData = res.data;
						if(!res.pageinfo ){
							this.rowNumber  = 0;
						}else if(res.pageinfo && !res.pageinfo.rowNumber){
							this.rowNumber  = 0;
						}else{
							this.rowNumber  = res.pageinfo.rowNumber;
						}
					}

				})

			},
		    addexperiment(){
		    	if(this.first){
		    		this.addLaboratory = true;
		    		this.experimentShow = true;
		    	}else{
		    		this.$message({
		    			type: 'info',
		    			message: '请选中组织！'
		    		})
		    	}

		     },
		     handleEdit(key,row){ //表格编辑
		     	this.ruleForm = {};
				this.experimentShow = true;
				for(var i in row){
					this.ruleForm[i] = row[i]
				}
				this.addLaboratory = false;
			},
		},
		components:{
			addexperiment,
			addGroup
		},
	}

</script>

<style scoped>
.oprate {
    height: 40px;
    padding-top: 5px;
    border-bottom: 1px solid #dadada;
}
.tree {
	width: 23%;
	height: 100%;
	overflow: auto;
	background: #fff;
}
.treeright {
    margin-left: 10px;
    width: calc(76% - 10px);
    height: calc(100% - 10px);
    vertical-align: top;
}
.infoitem {
  width: calc(100%/2);
  padding-right: 20px;
}
</style>
